import React, { Component, lazy, Suspense } from 'react'
import { Switch, Route } from 'react-router-dom'
import Loading from './components/loading'

import Layout from '@/views/layout'

const Detail = lazy(() => import('@/views/detail'))
const Search = lazy(() => import('@/views/search'))
const Login = lazy(() => import('@/views/login'))

class Router extends Component {
  render() {
    return (
      <Suspense fallback={<Loading />}>
        <Switch>
          <Route path='/detail/:id' component={Detail}></Route>
          <Route path='/search' component={Search}></Route>
          <Route path='/login' component={Login}></Route>
          {/* 它下面有子路由 */}
          <Route path='/' component={Layout}></Route>
        </Switch>
      </Suspense>
    )
  }
}

export default Router
